<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<style type="text/css">
*{margin:0;top:0;}
.main{
	height:50px;
	background:black;
	line-height:50px;

}
.main ul{
list-style:none;
}
.main ul li{
	color:#fff;
	float:left;
	margin-left:15px;
	line-height: 50px;
}
/*.main ul li:first-child{
	background:#ccc;
	width:100px;
	text-align:center;
}*/
.main ul li:hover{
	cursor:pointer;
	background:#ccc;
}
.info{
	
	height:200px;
	background:#272822;
	color:#fff;
	overflow:hidden;
}
.info p{
	margin-top:15px;
	display:none;
} 
.info p:first-child{
	display:block;
}

</style>
<body>
<img src="logo.jpg" id='imgid'>

<h1>qqqqqqqqqqqqqq</h1>
<h1>qqqqqqqqqqqddddddddddqqq</h1>
<h1>qqqqqqqqqqqqqq</h1>
<h1>qqqqqqqqqqqqqq</h1>
<h1>qqqqqqqqqqqqqq</h1>


<div class="main">
<ul>
	<li>linux</li>
	<li>php</li>
	<li>javascript</li>
</ul>
</div>
<div class='info'>
	<p>linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much </p>
		<p>php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much php is very much </p>
		<p>javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much javascript is very much </p>
</div>
</body>
<script type="text/javascript">
	//dom对象转换成jquery对象
imgobj=document.getElementById('imgid');
$(imgobj).click(function(){
	$(this).attr({'src':'jiu.jpg'});
});


//jquery对象转换成dom对象方法
val=$('h1')[0].outerHTML;
alert(val);



val=$('h1').get(1).outerHTML;
alert(val);


arr=$('h1').get();
alert(arr[1].outerHTML);



alert($('h1').length);


$('h1').each(function(i){
	$('h1').get()[i].setAttribute('num',i+1);
});
$('h1').click(function(){
	this.innerHTML=this.getAttribute('num');
})



$('h1').each(function(i){
	$(this).attr({'num':i+1});
});
$('h1').click(function(){
	$(this).html($(this).attr('num'));
})


$('h1').each(function(i){
	$(this).data({'num':i+1});
})
$('h1').click(function(){
	$(this).html($(this).data('num'));	
})


$('li').eq(0).css({'background':'#ccc'});
$('.main li').mouseenter(function(){
	$(this).css({'background':'#ccc'});
	$('.main li').not($(this)).css({'background':'black'});
	idx=$(this).index('.main li');
	$('.info p').eq(idx).show();
	$('.info p').not($('.info p').eq(idx)).hide();
})
</script>
</html>